<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>学生作答信息</title>
        <script type="text/JavaScript" src="../../../static/js/echarts.min.js"></script>
        <script type="text/JavaScript" src="../../../static/js/jquery-3.4.1.min.js"></script>
        <script type="text/JavaScript" src="../../../static/js/test.js"></script>
        <link href="../../../static/css/graph.css" rel="stylesheet">
        <style>
            table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 20px;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: center;
            }
            th {
                background-color: #2c3e50; /* 深蓝色 */
                color: white;
            }
            tr:nth-child(even) {
                background-color: #f2f2f2; /* 浅蓝色 */
            }
            tr:nth-child(odd) {
                background-color: #ffffff; /* 白色 */
            }
        </style>
    </head>

    <body onload="barchart()">
        <div>
            <input type="hidden" id="databaseName" value="choiceqa">
            <button type="button" id="type" value="第一类">Type1</button>
            <button type="button" id="type" value="第二类">Type2</button>
            <button type="button" id="type" value="第三类">Type3</button>
            <button type="button" id="type" value="第四类">Type4</button>
            <button type="button" id="type" value="第五类">Type5</button>
        </div>

        <div id="host">
            <div id="main" style="width:600px;height:400px;"></div>
            <div id="mainB" style="width:600px;height:400px;"></div>
            <div id="mainC" style="margin-top: -20%; width: 100%;">
                <table>
                    <thead>
                        <tr>
                            <th>题号</th>
                            <th>题目类型</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>i++</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>if</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>for</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Method</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>Classes</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>
